<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06个人简介</title>
</head>
<body>
<table border="1px" bgcolor="green">
  <caption>个人简历</caption>
  <tr>
    <th>照片</th>
    <td id="img_td" ></td>

  </tr>
  <tr>
    <th>姓名</th>
    <td id="name_td"></td>

  </tr>
  <tr>
    <th>年龄</th>
<td id="age_td"></td>
  </tr>
  <tr>
    <th>朋友</th>
    <td id="friends_td"></td>

  </tr>
</table>
<script>
  let person = {
    name:'范传奇',
    age:18,
    friends:['路飞','路飞2','路飞3'],
    imgUrl:'img/fcq.jpg'
  }

  let uImg = person.imgUrl;
  let uName = person.name;
  let uAge = person.age;
  let uFriends = person.friends;

  let imgTd = document.getElementById('img_td');
  let nameTd = document.getElementById('name_td');
  let ageTd = document.getElementById('age_td');
  let friendsTd = document.getElementById('friends_td');

  nameTd.innerHTML = uName;
  ageTd.innerHTML = uAge;
//图片
  let imgE = document.createElement('img');
  imgE.src = uImg;
  imgE.width = 100;
  imgTd.append(imgE);
  //数组
  let ul = document.createElement('ul');
  for (let fName of uFriends){
    let li = document.createElement('li');
    li.innerHTML = fName;
    ul.append(li);
  }
  friendsTd.append(ul);



</script>
</body>
</html>